<template>
	<view class="car-item" @click="toPage">
		<view class="setting-box flex a-i-c j-c-b color-999 f-s-22" v-if="showTop">
			<view class="">
				{{item.province_text || ""}}
				 <!-- | 发布于{{create_time}} -->
			</view>
			<view class="setting-view">
				<image class="icon" @click.stop="showOperate" src="@/static/images/circle/set-icon.svg" mode=""></image>
				<view class="operate-box flex a-i-c f-d-c" :class="operate_show?'heightauto':'o-height0'">
					<view class="item f-s-28 color-fff flex a-i-c" v-if="item.del_btn">
						<image class="o-icon" src="@/static/images/circle/set-del-icon.svg" mode=""></image>
						删除
					</view>
					<view class="item f-s-28 color-fff flex a-i-c" v-if="item.edit_btn" @click.stop="editInfo">
						<image class="o-icon" src="@/static/images/circle/set-del-icon.svg" mode=""></image>
						编辑 
					</view>
				</view>
			</view>
		</view>
		<view class="title-money-box flex a-i-c j-c-b">
			<view class="f-s-34 color-333 flex a-i-c title-work">
				<!-- <block v-for="(itm, index) of item.model" :key="index"> -->
					<text class="title-work">{{model_car[0]?.name || "其他车型"}}</text>
				<!-- </block> -->
				<view class="btn-left flex a-i-c f-s-24 color-2567F3">
					<view class="left-item">
						{{item.province_text || ""}}
					</view>
				</view>
			</view>
			<view class="f-s-34 color-FF3158 f-w-b">
				￥{{item.first_salary||0}}-￥{{item.last_salary ||0}}
			</view>
		</view>
		<view class="color-696969 f-s-24 l-h-34 m-b-20">
			{{item.content||0}}
		</view>
		<view class="flex a-i-c w-100 j-c-b">
			<view class="loc-time-box flex a-i-c color-999 f-s-24">
				<view class="left flex a-i-c">
					<image class="icon" src="@/static/images/circle/location-icon.svg" mode=""></image>
					起始地:{{item.work_province_text||""}}·{{item.work_city_text||""}}·{{item.work_area_text||""}}
				</view>
			</view>
			<view class="callkehu all-center f-s-24 color-fff" @click.stop="$callPhone(item.mobile)">
				联系客户
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex"
	import {goTo} from "@/nav.js"
	export default {
		name:"carBox",
		props:{
			item:{
				type:Object,
				default(){
					return{}
				}
			},
			showTop:{
				type:Boolean,
				default(){
					return false
				}
			},
			stab_id:{
				type:String,
				default:""
			}
		},
		computed:{
			...mapGetters(["fondCarTab"]),
			create_time(){
				if(this.item.createtime){
					let date = new Date(this.item.createtime)
					let yyyy = date.getFullYear()
					let mm = date.getMonth()+1<10?`0${date.getMonth()+1}`:date.getMonth()+1
					let dd = date.getDate()<10?`0${date.getDate()}`:date.getDate()
					return `${yyyy}-${mm}-${dd}`
				}
			},
			model_car(){
				let arr = []
				Object.keys(this.item.model).map(val=>{
					arr.push({id:val,name:this.item.model[val]})
				})
				return arr
			}
		},
		data() {
			return {
				operate_show:false
			};
		},
		mounted() {
			
		},
		methods:{
			goTo,
			editInfo(){
				let item = JSON.stringify(this.item)
				this.$store.commit("changePageTabInfo",item)
				let type = this.stab_id === '6' ? '6':'7'
				let title = this.stab_id === '6'?'找工作':'招聘'
				this.operate_show = false
				this.goTo({url:`/pages/pageTab/index?type=${type}&title=${title}`})
			},
			toPage(){
				console.log(this.$store.state.word_id)
				let type = ""
				if(this.stab_id){
					type = this.stab_id === '6' ? '1':'0'
				}else{
					type = this.$store.state.work_id
				}
				// let type = this.stab_id === '6' ? '1':'0'
				this.$store.commit("changeWorkInfo",this.item)
				this.goTo({url:'/pages/findWork/workInfo?id='+this.item.id})
			},
			showOperate(){
				this.operate_show = !this.operate_show
			}
		}
	}
</script>

<style lang="scss" scoped>
	.callkehu{
		background: #4981F2;
		border-radius: 4upx;
		width: 132upx;
		height: 48upx;
	}
	.btn-left{
		.left-item{
			padding: 4upx 14upx;
			border: 1upx solid #2567F3;
			border-radius: 4upx;
			margin-right: 34upx;
		}
	}
	.car-item{
		width: 100%;
		padding: 0 0 26upx;
		border-bottom: 2upx solid #F4F4F4;
		margin-bottom: 28upx;
		.car-info-box{
			width: 100%;
			.left-image{
				width: 224upx;
				height: 168upx;
				margin-right: 22upx;
			}
			.right{
				width: calc(100% - 224upx - 22upx);
				height: 168upx;
				.title{
					line-height: 42upx;
					margin-bottom: 4upx;
				}
				.km-view{
					line-height: 34upx;
					margin-bottom: 8upx;
				}
			}
		}
		.setting-box{
			width: 100%;
			margin-bottom: 20upx;
			.setting-view{
				position: relative;
				.icon{
					width: 32upx;
					height: 32upx;
				}
				.operate-box{
					position: absolute;
					z-index: 3;
					width: 144upx;
					background: rgba(0, 0, 0, 0.7);
					backdrop-filter: blur(4upx);
					border-radius: 8px;
					right: 0;
					transition: all .2s ease-in;
					// padding: 24upx 0;
					overflow: hidden;
					.item{
						margin-top: 24upx;
						.o-icon{
							width: 38upx;
							height: 38upx;
							margin-right: 16upx;
						}
					}
				}
				.o-height0{
					height: 0;
				}
				.heightauto{
					height: 156upx;
				}
			}
		}
		.right-btn{
			padding: 8upx 20upx;
			background: #4981F2;
			border-radius: 4upx;
		}
		.loc-time-box{
			width: 100%;
			margin-bottom: 24upx;
			.left{
				// width: 50%;
				line-height: 34upx;
				.icon{
					width: 36upx;
					height: 36upx;
					margin-right: 4upx;
				}
			}
		}
		.title-money-box{
			width: 100%;
			margin-bottom: 16upx;
			line-height: 48upx;
		}
	}
	.title-work{
		margin-right: 20upx;
	}
</style>